<template>
  <div class="page-container">
    <h3>深度侦听</h3>
    <input type="text" v-model="user.name" />
    <hr />
    <input type="text" v-model.number="user.age" />
    <hr />
  </div>
</template>

<script>
export default {
  name: "Watch3",
  data() {
    return {
      user: {
        name: "",
        age: 10,
      },
    };
  },
  // 所有侦听器都应该被定义到watch节点下
  watch: {
    // 对象格式的侦听器
    user: {
      handler(newVal) {
        console.log("user中有属性值发生变化====>", newVal);
      },
      // true时：开启深度监听，只要对象中任何一个属性值发生变化都会触发对象的侦听器
      deep: true,
    },
    // 只监听对象的单个属性变化
    "user.age": {
      handler(newVal) {
        console.log("user中age属性值发生变化====>", newVal);
      },
    },
  },
};
</script>
